<template>
  <div class="page-sty" v-if="dataInfo && dataInfo.payGroupVO">
    <div v-if="dataInfo.payGroupVO.groupUserType == 2">
      <div class="pay-status">
        <img src="@/assets/images/pay/pay_success.png" class="status-img" alt="">
        <span class="status-text">{{ $t('pay.paymentSuccess') }}</span>
      </div>
      <div class="tit-text">{{ $t('goods.group_play_text68') }}：</div>
      <div class="tit-sty">
        <div class="tit-text">1.{{ $t('goods.group_play_text69') }}</div>
        <div class="screen-sty">
          <div class="swiper swiperList" style="height: 32px;">
            <div class="swiper-wrapper" style="height: 32px;">
              <div class="swiper-slide" v-for="(item, index) in listArr" :key="index" style="height: 32px;">
                <div class="list-sty">
                  <span class="create-avatar" :style="{ background: calculateBg(item.email) }">
                    {{ calculateText(item.userName) }}
                  </span>
                  <span class="name-text">
                    {{ item.userName }} {{ getStatusText(item) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text33') }}</div>
      <group-status :info="dataInfo"></group-status>
      <div class="tit-text">2.{{ $t('goods.group_play_text71') }}</div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text72') }}</div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text73') }}</div>
    </div>
    <div v-else>
      <div class="pay-status">
        <img src="@/assets/images/pay/pay_success.png" class="status-img" alt="">
        <span class="status-text">{{ $t('pay.paymentSuccess') }}</span>
      </div>
      <div class="tit-text">{{ $t('goods.group_play_text10') }}</div>
      <group-status :info="dataInfo"></group-status>
      <div class="tit-text14">{{ $t('goods.group_play_text14') }}：</div>
      <div class="sub-tit" v-html="$t('goods.group_play_text15', { num: numMet() })"></div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text74') }}</div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text17') }}</div>
      <div class="sub-tit"><b>·</b> {{ $t('goods.group_play_text18') }}</div>
      <div class="tit-text">{{ $t('goods.group_play_text22') }}：</div>
    </div>
    <div class="gray-sty">
      <share-list :data="dataInfo.payGroupVO.groupUserType == 2 ? shareSuccessArr : shareJoinArr"></share-list>
    </div>
    <div class="handle-btn">
      <!-- 复制邀请链接 -->
      <div class="copy-area" @click="copyMet()">
        <img :src="imgMet()" class="tag" alt="">
        <div class="copy-btn">{{ $t('user.copyInvitationLink') }}</div>
      </div>
      <!-- 下载邀请海报 -->
      <div class="copy-area" @click="downMet()">
        <img :src="imgMet()" class="tag" alt="">
        <div class="copy-btn">{{ $t('goods.group_play_text31') }}</div>
      </div>
      <!-- 查看订单 -->
      <div class="look-btn" @click="lookMet()">{{ $t('pay.viewOrder') }}</div>
    </div>
    <group-poster-pop ref="posterRef"></group-poster-pop>
    <group-poster-activity ref="posterShareRef"></group-poster-activity>
  </div>
</template>
<script>
import { bigTimes, bigMinus } from "@/common/digital-computation";
import { mapState } from 'vuex';
import shareList from "./compontents/share-list";
import { avatarRandomBg } from "@/common/common";
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { groupUser } from "@/api/product";
import GroupStatus from './compontents/group-status.vue';
import GroupPosterPop from './compontents/group-poster-pop.vue';
import GroupPosterActivity from '@/views/main/user/components/group-poster-activity.vue';

export default {
  components: { shareList, GroupStatus, GroupPosterPop, GroupPosterActivity },
  props: {
    dataInfo: {
      type: [Object, String],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      shareSuccessArr: [
        { icon: require('@/assets/images/pay/img1.png'), name: 'TikTok', desc: this.$t('goods.group_play_text26') },
        { icon: require('@/assets/images/pay/img2.png'), name: 'Discord', desc: this.$t('goods.group_play_text29') },
        { icon: require('@/assets/images/pay/img3.png'), name: 'Reddit', desc: this.$t('goods.group_play_text27') },
        { icon: require('@/assets/images/pay/youTube.png'), name: 'YouTube', desc: this.$t('goods.openBookingYouTube') },
        { icon: require('@/assets/images/pay/img4.png'), name: 'Instagram', desc: this.$t('goods.group_play_text24') },
        // { icon: require('@/assets/images/pay/img5.png'), name: 'Twitter/X', desc: this.$t('goods.group_play_text25') },
        // { icon: require('@/assets/images/pay/img6.png'), name: 'Facebook', desc: this.$t('goods.group_play_text23') },
        // { icon: require('@/assets/images/pay/img9.png'), name: 'Pinterest', desc: this.$t('goods.group_play_text28') }
      ],
      shareJoinArr: [
        { icon: require('@/assets/images/pay/img1.png'), name: 'TikTok', desc: this.$t('goods.group_play_text62') },
        { icon: require('@/assets/images/pay/img2.png'), name: 'Discord', desc: this.$t('goods.group_play_text63') },
        { icon: require('@/assets/images/pay/img3.png'), name: 'Reddit', desc: this.$t('goods.group_play_text64') },
        { icon: require('@/assets/images/pay/youTube.png'), name: 'YouTube', desc: this.$t('goods.joinBookingYouTube') },
        { icon: require('@/assets/images/pay/img4.png'), name: 'Instagram', desc: this.$t('goods.group_play_text65') },
        { icon: require('@/assets/images/pay/img5.png'), name: 'Twitter/X', desc: this.$t('goods.group_play_text66') },
        { icon: require('@/assets/images/pay/img6.png'), name: 'Facebook', desc: this.$t('goods.group_play_text67') },
        { icon: require('@/assets/images/pay/img7.png'), name: 'WhatsApp', desc: this.$t('goods.group_play_text58') },
        { icon: require('@/assets/images/pay/img8.png'), name: 'Telegram', desc: this.$t('goods.group_play_text59') },
        { icon: require('@/assets/images/pay/img9.png'), name: 'Pinterest', desc: this.$t('goods.group_play_text60') },
        { icon: require('@/assets/images/pay/img10.png'), name: 'Snapchat', desc: this.$t('goods.group_play_text61') }
      ],
      createImgZh: require('@/assets/images/pay/join_zh.png'),
      createImgEn: require('@/assets/images/pay/join_en.png'),
      joinImgZh: require('@/assets/images/pay/create_zh.png'),
      joinImgEn: require('@/assets/images/pay/create_en.png'),
      headSwiper: '',
      autoplayConfig: {
        enabled: false,
        delay: 5000
      },
      listArr: []
    }
  },
  watch: {
    'listArr.length': {
      immediate: false,
      handler(newLength) {
        if (newLength > 1) {
          this.autoplayConfig.enabled = true;
        } else {
          this.autoplayConfig.enabled = false;
        }
        if (this.headSwiper) {
          if (this.autoplayConfig.enabled) {
            this.headSwiper.params.autoplay = {
              delay: this.autoplayConfig.delay,
              disableOnInteraction: false
            };
            this.headSwiper.autoplay.start();
          } else {
            this.headSwiper.autoplay.stop();
          }
        }
      }
    }
  },
  computed: {
    ...mapState({
      userLanguage: state => state.user.userLanguage,
      config: state => state.config.config,
      userInfo: state => state.user.userInfo
    }),
    getStatusText() {
      return (item) => {
        if (item.status === 'GROUP_SUCCESS') {
          return `${this.$t('goods.group_play_text32', { num: item.num })} $ ${item.amount}`;
        } else if (item.status === 'WAIT_GROUP') {
          return this.$t('goods.group_play_text56');
        }
        return '';
      };
    }
  },
  created() {
    this.getGroupUser();
    // 拼团用户“支付成功”打点
    if (this.$analytics) {
      this.$analytics.logEvent('pt_1003');
    }
  },
  methods: {
    numMet() {
      if (this.userLanguage.code == 'zh_CN') {
        if (this.dataInfo.payGroupVO) {
          const num = bigTimes(this.dataInfo.payGroupVO.discount, 100);
          return this.chineseDiscount(num);
        }
      } else {
        if (this.dataInfo.payGroupVO) {
          return bigTimes(this.dataInfo.payGroupVO.discount, 100);
        }
      }
    },
    chineseDiscount(num) {
      if (0 <= num && num <= 100) {
        const discount = num / 10;
        if (discount === 10) {
          return '不打折';
        } else if (discount === 0) {
          return '免费';
        } else {
          return `${bigMinus(10, discount)}`;
        }
      } else {
        return '无效折扣数值';
      }
    },
    copyMet() {
      let url = '';
      if (this.dataInfo.payGroupVO.groupUserType == 1) {
        url = `${this.config.webDomain}/goods/details?id=${this.dataInfo.payGroupVO.spuNo}&&channel=${this.dataInfo.payGroupVO.channel}&&inviteCode=${this.userInfo.inviteCode || ''}&&activityCode=${this.dataInfo.payGroupVO.activityCode} ,I just joined a Group Buy on 100buy and got this product for ${bigTimes(Number(this.dataInfo.payGroupVO.discount), 100)}% off, saving $${this.dataInfo.payGroupVO.discountAmount} ! You should check it out too!`;
        // 点击拼团的‘复制分享链接’或者‘下载分享海报’
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1004');
        }
      } else if (this.dataInfo.payGroupVO.groupUserType == 2) {//团员
        // url = `https://discord.com/invite/tyqE6KBvD4 ，I just secured my favorite items at ${bigTimes(Number(this.dataInfo.payGroupVO.discount), 100)}%  OFF on 100buy and saved $${this.dataInfo.payGroupVO.discountAmount} ! 😍 Want in?`
        url = `https://discord.com/invite/H5fEeBCY3y ，I just secured my favorite items at ${bigTimes(Number(this.dataInfo.payGroupVO.discount), 100)}%  OFF on 100buy and saved $${this.dataInfo.payGroupVO.discountAmount} ! 😍 Want in?`
        
        // 点击拼团的‘复制分享链接’或者‘下载分享海报’
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1010');
        }
      }
      this.onCopy(url);
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('goods.group_play_text47'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    downMet() {
      if (this.dataInfo.payGroupVO.groupUserType == 1) {//团长
        this.$refs.posterRef.open(this.dataInfo.payGroupVO);
        // 点击“复制邀请链接”或“下载邀请海报”打点
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1004');
        }
      } else if (this.dataInfo.payGroupVO.groupUserType == 2) {//团员
        this.$refs.posterShareRef.open(this.dataInfo.payGroupVO);
        // 点击“复制邀请链接”或“下载邀请海报”打点
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1010');
        }
      }
    },
    lookMet() {
      this.$router.push('/user/order');
    },
    getGroupUser() {
      this.listArr = [];
      groupUser().then((res) => {
        this.listArr = res.result || [];
        if (this.headSwiper) {
          this.headSwiper.destroy(true, true);
        }
        this.$nextTick(() => {
          this.initSwiper();
        });
      })
    },
    // 初始化swiper
    initSwiper() {
      const self = this;
      this.$nextTick(() => {
        this.headSwiper = new Swiper(".swiperList", {
          effect: "cards",// 切换效果
          cubeEffect: {
            slideShadows: false,
            shadow: false, // 也可以尝试禁用阴影
          },
          allowTouchMove: false,
          parallax: true,
          autoplay: this.autoplayConfig.enabled ? {
            delay: this.autoplayConfig.delay,
            disableOnInteraction: false
          } : false,
          direction: 'vertical',// horizontal-水平  vertical-垂直
          initialSlide: 0,// 初始化显示第一个
          speed: 1000,// 单次的切换速度
          slidesPerView: 1,
          loop: false,// 循环
          spaceBetween: 0,
          // 监听 slideChange 事件
          on: {
            slideChange() {
              // 获取当前显示的幻灯片索引
              const currentIndex = this.activeIndex;
              // 获取幻灯片总数
              const totalSlides = this.slides.length;
              if (currentIndex === totalSlides - 1) {
                self.getGroupUser();
              }
            }
          }
        });
      })
    },
    calculateBg(email) {
      const result = avatarRandomBg(email);
      return result.bg;
    },
    calculateText(email) {
      const result = avatarRandomBg(email);
      return result.text;
    },
    imgMet() {
      if (this.dataInfo.payGroupVO.groupUserType == 2) {
        if (this.userLanguage.code == 'zh_CN') {
          return this.createImgZh;
        } else {
          return this.createImgEn;
        }
      } else {
        if (this.userLanguage.code == 'zh_CN') {
          return this.joinImgZh;
        } else {
          return this.joinImgEn;
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.page-sty {
  padding: 0 124px;

  .pay-status {
    display: flex;
    align-items: center;

    .status-img {
      width: 52px;
      height: 52px;
    }

    .status-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 32px;
      color: #1E1714;
      line-height: 38px;
      margin-left: 24px;
    }
  }

  .tit-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #1E1714;
    line-height: 24px;
    margin-top: 28px;
  }

  .tit-text14 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #1E1714;
    line-height: 24px;
    margin-top: 20px;
  }

  .tit-sty {
    display: flex;
    align-items: center;
    margin-top: 12px;

    .tit-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #1E1714;
      line-height: 24px;
      margin-top: 0;
      margin-right: 12px;
    }

    .screen-sty {
      height: 32px;
      padding: 4px 6px;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.14);
      border-radius: 22px 22px 22px 22px;

      :deep(.swiper-container-cube .swiper-cube-shadow) {
        background: none;
      }

      .swiperSty {
        width: 100%;
        height: 32px;
        overflow: hidden;

        .swiper-wrapper {

          .swiper-slide {
            width: 100%;
          }
        }
      }

      .list-sty {
        display: inline-flex;
        align-items: center;

        .create-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          font-weight: 500;
          font-size: 12px;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .name-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #767B93;
          line-height: 14px;
          margin-left: 6px;
        }
      }
    }
  }

  .sub-tit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #767B93;
    line-height: 21px;
    margin-top: 24px;

    :deep(span) {
      color: #FF186B;
    }
  }

  .gray-sty {
    width: 836px;
    min-height: 180px;
    background: #F7F9FC;
    border-radius: 12px 12px 12px 12px;
    padding: 20px;
    margin-top: 12px;
  }

  .handle-btn {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 44px;

    .copy-area {
      width: 260px;
      height: 49px;
      border-radius: 10px 10px 10px 10px;
      border: 1px solid #FF186B;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #FF186B;
      line-height: 21px;
      cursor: pointer;

      .tag {
        width: 276px;
        position: absolute;
        top: -16px;
        left: -10px;
      }
    }

    .look-btn {
      width: 220px;
      height: 49px;
      background: #FF186B;
      border-radius: 10px 10px 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 21px;
      cursor: pointer;
    }
  }
}
</style>